<template>
	<div>
		<header-title :title="currentData?.labelName" :titleT="currentData?.labelNameT" :go="go" />
		<div v-if="isShowFilter" class="h-group-t-big"></div>
		<search-filter
			v-if="isShowFilter"
			:type="type"
			:tagData="tagData"
			@update-checked-values="handleCheckedValues"
			@update-sorting-values="handleSortingValues" />
		<!-- <div class="h-group-t"></div> -->
		<slots-card
			iconName="minigames-icon"
			:type="type"
			:titleT="currentData?.labelNameT"
			:tagData="tagData"
			:checkedValues="checkedValues"
			:sortingValues="sortingValues"
			@update-gameList-values="handleGameListEvent" />
		<div class="h-group-t-xl"></div>
		<game-list type="provider"></game-list>
		<div class="h-group-t-xl"></div>
		<live-rank />
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import liveRank from '../categories/components/live-rank.vue'
import GameList from '@/components/slots/game-list/index.vue'
import SearchFilter from '../categories/components/search-panel/index.vue'
import HeaderTitle from '../categories/components/header-title.vue'
import SlotsCard from '@/components/slots/slots-card/index.vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/store'

interface TagData {
	id: string
}

const props = defineProps({
	type: {
		type: String as any,
		default: ''
	},
	go: {
		type: String as any,
		default: '-'
	}
})
const route = useRoute()
const appStore = useAppStore()

const tagData = ref<TagData>({ id: route.params.id as string })
const currentData = ref()
const checkedValues = ref<string[]>([])
const sortingValues = ref('1') //default 显示第一个

const isShowFilter = computed(() => {
	if (props.type === 'recent' || props.type === 'favourite') {
		return false
	} else {
		return true
	}
})
watch([() => appStore.lang, () => route.params.id], () => {
	tagData.value = { id: route.params.id as string }
})
const handleCheckedValues = (values: string[]) => {
	checkedValues.value = values
}
const handleSortingValues = (values: any) => {
	sortingValues.value = values
}
const handleGameListEvent = (values: any) => {
	currentData.value = values
}
</script>
